<template>
  <div class=''>
    <Card style="margin:20px 100px 0 100px;">
        <div style="margin-bottom:20px">
            <Row>
                <Col span="9" style="width: 39.5%;">
                   <input type="text"  name="address_detail" id="suggestId" placeholder="请输入地址" v-model="address_detail" class="input_style">
                   <Button type="primary" icon="md-close" @click="clear">清除</Button>
                </Col>
                <Col span="5" style="text-align:center;width: 20.83333333%;"><h1>百度地图测试版本</h1></Col>
                <Col span="9" style="width: 39.5%;">
                    <div style="float:right">
                        <Dropdown style="margin-left: 20px" @on-click="open" >
                            <Button type="primary">
                                项目功能预览
                              <Icon type="ios-arrow-down"></Icon>
                            </Button>
                            <DropdownMenu slot="list">
                                <DropdownItem name="Main">Element富文本</DropdownItem>
                                <DropdownItem name="Echarts">Echarts图表</DropdownItem>
                            </DropdownMenu>
                        </Dropdown>
                    </div>
                </Col>
            </Row>
        </div>
        <div id="allmap"></div>
    </Card>
  </div>
</template>

<script>
  import $ from 'jquery'
  export default {
    data(){
      return {
        address_detail: "", //详细地址
        center: {lng: "", lat: ""},
      }
    },
    methods:{
      open(name){
        this.$router.push({
          name: name,
          // query: {
          //   created: 0,
          // },
        });
      },
      clear(){
        this.address_detail = ""
        var map = new window.BMap.Map("allmap");
        // 初始化地图,设置中心点坐标，
        var point = new window.BMap.Point(116.404,39.915); // 创建点坐标，联航路的经纬度坐标
        map.centerAndZoom(point, 13);
        map.enableScrollWheelZoom();
       //添加缩略图控件
        // map.addControl(new window.BMap.OverviewMapControl({isOpen:false,anchor:BMAP_ANCHOR_BOTTOM_RIGHT}));
        map.addControl(new window.BMap.OverviewMapControl());
        //添加缩放平移控件
        map.addControl(new window.BMap.NavigationControl());
        //添加比例尺控件
        map.addControl(new window.BMap.ScaleControl());
        //添加地图类型控件
        map.addControl(new window.BMap.MapTypeControl());
      },
      address(){
        let that = this;
        $.ajax({
          type : "get",
          async:false,
          url : 'http://api.map.baidu.com/geocoder/v2/',
          dataType : "jsonp",
          data:{
            location:this.center.lat+','+this.center.lng,
            output:'json',
            pois:'1',
            // ak:'rQxHPQX1ua21rWnXzTbUh5KSSUbnefxR'
            ak:'QsVXkxxkfjL9W9A1EbsXsY80vtEFIQ6j'
          },
          success: function(json){
            that.address_detail = json.result.formatted_address
          },
          error: function() {
            alert("失败");
          }
        });
      },
    },
    mounted(){
      this.$nextTick(function () {
        var th = this
        // 创建Map实例
        var map = new window.BMap.Map("allmap");
        // 初始化地图,设置中心点坐标，
        var point = new window.BMap.Point(116.404,39.915); // 创建点坐标，联航路的经纬度坐标
        map.centerAndZoom(point, 13);
        map.enableScrollWheelZoom();
       //添加缩略图控件
        // map.addControl(new window.BMap.OverviewMapControl({isOpen:false,anchor:BMAP_ANCHOR_BOTTOM_RIGHT}));
        map.addControl(new window.BMap.OverviewMapControl());
        //添加缩放平移控件
        map.addControl(new window.BMap.NavigationControl());
        //添加比例尺控件
        map.addControl(new window.BMap.ScaleControl());
        //添加地图类型控件
        map.addControl(new window.BMap.MapTypeControl());
        var ac = new window.BMap.Autocomplete({ "input": "suggestId", "location": map })//建立一个自动完成的对象
        var myValue
        ac.addEventListener("onconfirm", function (e) {    //鼠标点击下拉列表后的事件
          var _value = e.item.value;
          myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
          this.address_detail = myValue
          setPlace();
        });
        function setPlace() {
          map.clearOverlays();    //清除地图上所有覆盖物
          function myFun() {
            th.center = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
            map.centerAndZoom(th.center, 18);
            map.addOverlay(new window.BMap.Marker(th.center));    //添加标注
          }
          var local = new window.BMap.LocalSearch(map, { //智能搜索
            onSearchComplete: myFun
          });
          local.search(myValue);
          // console.log(local)
          //测试输出坐标（指的是输入框最后确定地点的经纬度）
          map.addEventListener("click",function(e){
            console.log(e)
            //经度
            // console.log(th.center.lng);
            //维度
            // console.log(th.center.lat);
            th.address()
          })
        }
        // 初始化获取经纬度转化地址
        map.addEventListener("click",function(e){
          console.log(e.point)
          th.center.lng = e.point.lng;
          th.center.lat = e.point.lat;
          //经度
          // console.log(e.point.lng);
          //维度
          // console.log(e.point.lat);
          th.address()
        })
      })
    },
  }
</script>


<style scoped lang='less'>
 #allmap {
    width: 100%;
    height: 80vh;
    background-color: rgb(144, 221, 238);
    font-family: "微软雅黑";
    border:1px solid #ccc;
  }
  .input_style{
    margin-right: 20px;
    -webkit-appearance: none;
    background-color: #fff;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    box-sizing: border-box;
    color: #606266;
    display: inline-block;
    font-size: inherit;
    height: 40px;
    line-height: 40px;
    outline: none;
    padding: 0 15px;
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    width: 60%;
  }
  .input_style:focus {
      outline: none;
      border-color: #409eff;
  }
  .map{
    width: 100%;
  }
</style>
